<template>
  <div class="page page-with-subnavbar">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
            <span class="ios-only">返回</span>
          </a>
        </div>
        <div class="title">{{title}}</div>
        <div class="subnavbar">
          <div class="subnavbar-inner">
            <div class="segmented segmented-raised">
              <a class="button tab-link tab-link-active" href="#lcbd">流程表单</a>
              <a class="button tab-link" href="#lcxx">流程状态</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-content  todo-list-details  ">
      <div class="tabs">
        <div class="tab tab-active" id="lcbd" style="padding-bottom: 50px">
          <iframe name='todoListDetailsIFrame' class='todoListDetailsIFrame' src="" frameborder="0" width="100%"
                  style="overflow-y: auto"></iframe>

          <div class="block accordion-list custom-accordion" id="lzyjTimeLine">
            <div class="accordion-item">
              <div class="accordion-item-toggle lzyj-toggle">
                <span>流转意见</span>
              </div>
              <div class="accordion-item-content">
                <div class="timeline lzyj-timeline">
                  <!-- Timeline item with Card -->
                  <div class="timeline-item">
                    <div class="timeline-item-divider"><img src="./imgs/mytododetail/user_icon.png" alt=""></div>
                    <div class="timeline-item-content card">
                      <div class="mark"></div>
                      <div class="card-header">同意！</div>
                      <div class="card-content card-content-padding">张三 <p class="datetime">提交于2018-01-22 15:20:20 <i
                        class="f7-icons on">up</i></p>
                      </div>
                      <div class="card-footer active">
                        <p>节点: <span>考核人</span></p>
                        <p>操作: <span>批准</span></p>
                        <p>接收人: <span>何波</span></p>
                      </div>
                    </div>
                  </div>
                  <div class="timeline-item">
                    <div class="timeline-item-divider"><img src="./imgs/mytododetail/user_icon.png" alt=""></div>
                    <div class="timeline-item-content card">
                      <div class="mark"></div>
                      <div class="card-header">同意！</div>
                      <div class="card-content card-content-padding">张三 <p class="datetime">提交于2018-01-22 15:20:20 <i
                        class="f7-icons on">up</i></p>
                      </div>
                      <div class="card-footer active">
                        <p>节点: <span>考核人</span></p>
                        <p>操作: <span>批准</span></p>
                        <p>接收人: <span>何波</span></p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="lzyj-toggle fixd-bottom">
            <span>流转意见</span>
          </div>
          <div class="lzyj-footer">
            <div class="pq sheet-open" data-sheet=".pq-sheet">
              <input type="text" placeholder="请批签" disabled>
            </div>
            <div class="fs-btn">
              <button class="col button button-fill" @click="goNext()">发送</button>
            </div>
            <i id='lzyj_ac' class="material-icons" style="color:#999;">add_circle</i>
          </div>
          <div class="sheet-modal pq-sheet sheet">
            <div class="toolbar">
              <div class="toolbar-inner">
                <div class="left"></div>
                <a class="item-link smart-select smart-select-init cyy-select" data-open-in="popover">
                  <select name="cyy">
                    <option value="常用批示语1">常用批示语1</option>
                    <option value="常用批示语2">常用批示语2</option>
                    <option value="常用批示语3">常用批示语3</option>
                    <option value="常用批示语4">常用批示语4</option>
                    <option value="常用批示语5">常用批示语5</option>
                  </select>
                  <div class="item-content">
                    <div class="item-inner">
                      <div class="item-title">常用批示语<i class="f7-icons">more</i></div>
                    </div>
                  </div>
                </a>
                <div class="right"><a class="link sheet-close" href="#">&times;</a></div>
              </div>
            </div>
            <div class="sheet-modal-inner">
              <textarea id="pg_text" placeholder="请签批"></textarea>
            </div>
            <div class="pg-sheet-footer">
              <p class="segmented segmented-raised ">
                <button class="button pg-sheet-th">退回</button>
                <button class="button button-active pg-sheet-fs">发送</button>
              </p>
            </div>
          </div>
        </div>
        <div class="tab" id="lcxx">
          <div class="block block-strong">
            <p><span>绿色:已办理完成</span><span>蓝色:未签收</span><span>红色:正在处理</span></p>
          </div>
          <div class="list lcxx-list">
            <ul>
              <li class="accordion-item"><a href="#" class="item-content item-link">
                <div class="item-inner">
                  <div class="item-title">办公室文秘</div>
                  <span class="zzbl">正在办理</span>
                </div>
              </a>
                <div class="accordion-item-content">
                  <div class="block">
                    <div class="data-table lcxx-table">
                      <table>
                        <thead>
                        <tr>
                          <th class="label-cell">用户</th>
                          <th class="">意见</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                          <td class="label-cell">陈思</td>
                          <td class="">
                            <p>开始:2018-01-20 15:15:15</p>
                            <p>签收:2018-01-20 15:15:15</p>
                            <p>结束:2018-01-20 15:15:15</p>
                            <p>意见:同意</p>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </li>
              <li class="accordion-item"><a href="#" class="item-content item-link">
                <div class="item-inner">
                  <div class="item-title">办公室文秘</div>
                  <span class="ywc">已完成</span>
                </div>
              </a>
                <div class="accordion-item-content">
                  <div class="block">
                    <div class="data-table lcxx-table">
                      <table>
                        <thead>
                        <tr>
                          <th class="label-cell">用户</th>
                          <th class="">意见</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                          <td class="label-cell">陈思</td>
                          <td class="">
                            <p>开始:2018-01-20 15:15:15</p>
                            <p>签收:2018-01-20 15:15:15</p>
                            <p>结束:2018-01-20 15:15:15</p>
                            <p>意见:同意</p>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </li>
              <li class="accordion-item"><a href="#" class="item-content item-link">
                <div class="item-inner">
                  <div class="item-title">办公室文秘</div>
                  <span class="ywc">已完成</span>
                </div>
              </a>
                <div class="accordion-item-content">
                  <div class="block">
                    <div class="data-table lcxx-table">
                      <table>
                        <thead>
                        <tr>
                          <th class="label-cell">用户</th>
                          <th class="">意见</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                          <td class="label-cell">陈思</td>
                          <td class="">
                            <p>开始:2018-01-20 15:15:15</p>
                            <p>签收:2018-01-20 15:15:15</p>
                            <p>结束:2018-01-20 15:15:15</p>
                            <p>意见:同意</p>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </li>
              <li class="accordion-item"><a href="#" class="item-content item-link">
                <div class="item-inner">
                  <div class="item-title">办公室文秘</div>
                  <span class="ywc">已完成</span>
                </div>
              </a>
                <div class="accordion-item-content">
                  <div class="block">
                    <div class="data-table lcxx-table">
                      <table>
                        <thead>
                        <tr>
                          <th class="label-cell">用户</th>
                          <th class="">意见</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                          <td class="label-cell">陈思</td>
                          <td class="">
                            <p>开始:2018-01-20 15:15:15</p>
                            <p>签收:2018-01-20 15:15:15</p>
                            <p>结束:2018-01-20 15:15:15</p>
                            <p>意见:同意</p>
                          </td>
                        </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>

  .todoListDetailsIFrame {
    transition: all .3s;
  }

  .todoListDetailsIFrame.sheetIsOpen {
    transform: translateY(-210px);
  }

  .process-form .item-label {
    color: #666;
  }

  .process-form .download {
    color: #000;
  }

  #lzyjTimeLine {
    margin-top: 0;
    margin-bottom: 0;
    background-color: #fff;
    padding: 30px 0px;
  }

  #lzyjTimeLine.hid {
    display: none;
  }

  .lzyj-toggle > span {
    background-color: #e77272;
    color: #fff;
    padding: 3px 6px;
    display: inline-block;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
    position: relative;
    left: 0px;
  }

  .lzyj-timeline .card {
    box-shadow: none !important;
    border: 1px solid #eee;
  }

  .lzyj-timeline .mark {
    position: absolute;
    top: 12px;
    left: -6px;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    transform: rotate(-45deg);
  }

  .lzyj-timeline .card .card-header {
    min-height: inherit;
    padding: 5px 10px;
    color: #333;
    font-size: 16px;
  }

  .lzyj-timeline .card .card-content {
    padding: 5px 10px;
    font-size: 16px;
  }

  .lzyj-timeline .card .card-content > .datetime {
    float: right;
    font-size: 12px;
    color: #999;
    line-height: 22px;
  }

  .lzyj-timeline .card .card-content > .datetime > .f7-icons {
    font-size: 12px;
    transition: all .3s linear;
    transform: rotate(180deg);
  }

  .lzyj-timeline .card .card-content > .datetime > .f7-icons.on {
    transform: rotate(0deg);
  }

  .lzyj-timeline .card .card-footer {
    padding: 0 10px;
    overflow: hidden;
    display: block;
    background-color: #eee;
    height: 0px;
    min-height: 0;
    transition: all .3s linear;
  }

  .lzyj-timeline .card .card-footer.active {
    height: 60px;
  }

  .lzyj-timeline .card .card-footer > p {
    float: left;
    min-width: 45%;
    margin: 5px;
  }

  .lzyj-timeline .card .card-footer > p > span {
    color: #333;
  }

  .lzyj-timeline .timeline-item-divider {
    width: 30px;
    height: 30px;
    background-color: #e77272;
  }

  .lzyj-timeline .timeline-item-divider img {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }

  .fixd-bottom {
    position: fixed;
    left: 10px;
    bottom: 55px;
    display: none;
    z-index: 9;
    box-shadow: 0 0 15px #eee;
  }

  .fixd-bottom.active {
    display: block;
  }

  .fixd-bottom > span {
    border-radius: 16px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .lzyj-footer {
    box-sizing: border-box;
    height: 50px;
    background-color: #eee;
    position: fixed;
    z-index: 9;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 5px 10px;
  }

  .lzyj-footer .pq {
    float: left;
    width: 72%;
    height: 40px;
    border-radius: 3px;
    padding-left: 26px;
    background: #fff url("./imgs/edit_icon.png") no-repeat 6px center;
    background-size: 14px;
    box-sizing: border-box;
  }

  .lzyj-footer .pq > input {
    height: 40px;
    line-height: 40px;
    color: #999;
    font-size: 14px;
    padding-left: 0;
    width: 100%;
  }

  .lzyj-footer .fs-btn {
    float: left;
    width: 20%;
    padding: 0 2%;
    height: 40px;
    box-sizing: border-box;

  }

  .lzyj-footer .fs-btn .button {
    height: 40px;
    background-color: #db2d2d;
    min-width: 32px;
    width: 100%;
  }

  .lzyj-footer > i {
    float: left;
    width: 8%;
    height: 40px;
    line-height: 40px;
    font-size: 30px;
  }

  .pq-sheet.sheet-modal .toolbar + .sheet-modal-inner {
    height: calc(100% - 88px);
    background-color: #fff;
  }

  .pq-sheet .toolbar {
    /*background-color: #f9f9f9;*/
  }

  .pq-sheet .toolbar-inner .smart-select {
    position: absolute;
    left: 50%;
    margin-left: -50px;
  }

  .pq-sheet .toolbar:before {
    content: '';
    display: none !important;
  }

  .pq-sheet .sheet-close {
    font-size: 30px;
    color: #999;
  }

  .pq-sheet #pg_text {
    padding: 5px;
    width: 100%;
    height: 100%;
    font-size: 16px;
  }

  .md .pq-sheet .sheet-close {
    color: #fff;
  }

  .pq-sheet .pg-sheet-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 44px;
    background-color: transparent;;
    z-index: 9;
  }

  .pq-sheet .pg-sheet-footer > p {
    margin: 0;
  }

  .pq-sheet .pg-sheet-footer .button {
    border-radius: 0 !important;
    border-color: transparent;
    line-height: 44px;
    height: 44px;
    background-color: #f7f7f8;
    color: #333;
  }

  .pq-sheet .pg-sheet-footer .button.button-active {
    background-color: #db2d2d;
    color: #fff;
  }

  .pq-sheet .item-content .item-title {
    font-size: 17px;
  }

  .pq-sheet .item-content .item-title > i {
    font-size: 17px;
    line-height: 17px;
    margin-left: 5px;
  }

  .pq-sheet .item-content .item-after {
    display: none;
  }

  #lcxx .block-strong {
    padding: 5px 10px;
    font-size: 16px;
    color: #333;
  }

  #lcxx .block-strong > p {
    overflow: auto;
  }

  #lcxx .block-strong > p > span {
    float: left;
    margin-left: 6px;
    font-size: 14px;
  }

  #lcxx .lcxx-list .item-inner > span:last-child {
    float: right;
    font-size: 14px;
  }

  #lcxx .lcxx-list .item-inner > span.zzbl:last-child {
    color: #ff0000;
  }

  #lcxx .lcxx-list .item-inner > span.ywc:last-child {
    color: #4f8b36;
  }

  #lcxx .lcxx-table {
    border: 1px solid #eee;
  }

  #lcxx .lcxx-table thead {
    background-color: #f6f6f6;
  }

  #lcxx .lcxx-table th {
    height: 32px
  }
</style>
<script>
  return {
    // Lifecycle Hooks
    beforeCreate() {
      console.log('componentBeforeCreate', this);
    },
    created() {
      console.log('componentCreated', this);
    },
    beforeMount() {
      console.log('componentBeforeMount', this);
    },
    mounted() {
      console.log('componentMounted', this);
      this.$app.preloader.show();
      setTimeout(function () {
        console.log('拿代办事项id去查询内容', this.$route.params.id);
        document.querySelector('iframe.todoListDetailsIFrame').src = './pages/todo-list-detail-type/type1.html';
        app.data.todoListDetailsFormData = { //  储存代办列表详情中的动态表单数据  给ifram页面做渲染
          title: '采购物品清单',
          fqr: '发起人',
          fqsj: '2018/1/1 12:11:12',
          htbh: 'MK16432123',
          gysm: '概要说明概要说明概要说明概要说明概要说明概要说明概要说明概要说明',
          htcbr: '李三',
          htbmfzr: '张网',
          cbbyj: '',
        }
        this.$app.preloader.hide();
      }.bind(this), 1000)
    },
    beforeDestroy() {
      console.log('componentBeforeDestroy', this);
    },
    destroyed() {
      console.log('componentDestroyed', this);
    },
    // Component Data
    data: function () {
      // Must return an object
      return {
        title: this.$route.params.title,
        id: this.$route.params.id,
        ac: null,
      }
    },
    // Component Methods
    methods: {
      optionIsClick: function () {
        console.log('option is click ')
        // option 被点击 关闭选择器
        setTimeout(function () {
          var smartSelect = app.smartSelect.get('.cyy-select');
          smartSelect.close();
        }.bind(this), 0)
      },
      sheetWillOpen: function () {
        console.log('sheet will open');
        $$('.todoListDetailsIFrame').removeClass('sheetIsOpen').addClass('sheetIsOpen');
      },
      sheetWillClose: function () {
        console.log('sheet will close');
        $$('.todoListDetailsIFrame').removeClass('sheetIsOpen');
      },
      cardContentClick: function (e) {
        var contentEl = null;
        if ($$(e.target).hasClass('card-content')) {
          contentEl = $$(e.target);
        } else {
          contentEl = $$(e.target).parents('.card-content');
        }
        ;
        var mark = contentEl.find('.f7-icons');
        var footEl = $$(contentEl[0].nextElementSibling);
        if (footEl.hasClass('active')) {
          footEl.removeClass('active')
        } else {
          footEl.addClass('active')
        }
        ;
        if (mark.hasClass('on')) {
          mark.removeClass('on')
        } else {
          mark.addClass('on')
        }
        ;
      },
      scrollToBottom: function () {
        setTimeout(function () {
          $$('.todo-list-details').scrollTop($$('.todo-list-details').height(), 300);
        }, 300)
      },
      acOpen: function () {
        this.ac.open();
        return this.ac;
      },
      sheetClose: function () {
        if ($$('.sheet-close').length !== 0) {
          $$('.sheet-close').trigger('click')
        }
      },
      openAllAccordion: function () {
        $$('.accordion-item > a.item-link').trigger('click');
      },
      selectOpen: function () {
        console.log('selectIsOpen');
        // 给 option 绑定click事件
        setTimeout(function () {
          $$('[data-select-name = "cyy"]').on('click', this.optionIsClick);
        }.bind(this), 0)
      },
      selectClose: function () {
        // 解绑option 点击事件
        $$('.cyy-select select').off('click', this.optionIsClick);
        var result = $$('.pq-sheet .item-content .item-after').html();
        console.log($$('[data-select-name="cyy"]'), result);
        $$('#pg_text')[0].value = result;
        $$('#pg_text').focus();
      },
      goNext: function () {
        app.router.navigate(`/personnel-choice-component/${this.id}`)
      }
    },
    // Page Events
    on: {
      pageMounted: function (e, page) {
        console.log('pageMounted', page)
      },
      pageInit: function (e, page) {
        console.log('pageInit', page);
      },
      pageBeforeIn: function (e, page) {
        console.log('pageBeforeIn', page);
      },
      pageAfterIn: function (e, page) {
        console.log('pageAfterIn', page);
        $$('#lzyjTimeLine').on('click', '.card-content', this.cardContentClick)
        $$('.lzyj-toggle').on('click', this.scrollToBottom);
        $$('#lzyj_ac').on('click', this.acOpen);
        $$('a[href="#lcxx"]').on('click', this.sheetClose);
        $$('a[href="#lcxx"]').once('click', this.openAllAccordion);
        console.log($$('.lzyj-toggle').offset().top, page.$pageEl[0].scrollHeight - 50)
        if ($$('.accordion-item-toggle.lzyj-toggle').offset().top > page.$pageEl[0].scrollHeight - 50) {
          console.log('第一屏没显示')
          $$('#lzyjTimeLine').addClass('hid');
          $$('.fixd-bottom').addClass('active').once('click', function () {
            $$('#lzyjTimeLine').removeClass('hid');
            $$(this).removeClass('active')
            $$('.accordion-item-toggle.lzyj-toggle').trigger('click');
          })
        } else {
          console.log('第一屏显示到了')
        }
        ;
        $$('.cyy-select').on('smartselect:open', this.selectOpen);
        $$('.cyy-select').on('smartselect:close', this.selectClose);
        this.ac = app.actions.create({ // 创建action sheet
          buttons: [
            // First group
            [
              {
                text: '发送',
                color: 'red',
                onClick: function () {
                  this.goNext();
                }.bind(this)
              },
              {
                text: '保存',
                color: 'red'
              },
              {
                text: '退回',
                color: 'red'
              },
              {
                text: '传阅',
                color: 'red'
              }
            ],
            // Second group
            [
              {
                text: '取消',
                color: 'grey'
              }
            ]
          ]
        });
        $$('.pq-sheet').on('sheet:open', this.sheetWillOpen);
        $$('.pq-sheet').on('sheet:close', this.sheetWillClose);
      },
      pageBeforeOut: function (e, page) {
        console.log('pageBeforeOut', page)
        $$('#lzyjTimeLine').off('click', '.card-content', this.cardContentClick)
        $$('.accordion-item-toggle.lzyj-toggle').off('click', this.scrollToBottom);
        $$('#lzyj_ac').off('click', this.acOpen);
        $$('a[href="#lcxx"]').off('click', this.sheetClose);
        $$('.cyy-select').off('smartselect:close', this.selectClose);
        $$('.cyy-select').off('smartselect:open', this.selectOpen);
        this.sheetClose();
        $$('.pq-sheet').off('sheet:open', this.sheetWillOpen);
        $$('.pq-sheet').off('sheet:close', this.sheetWillClose);
      },
      pageAfterOut: function (e, page) {
        console.log('pageAfterOut', page);
      },
      pageBeforeRemove: function (e, page) {
        console.log('pageBeforeRemove', page);
      },
    }
  };

</script>
